<template>
  <view class="page">
    <u-sticky bgColor="#fff">
      <Tabs :list="tabList" @click="handleTab" :current="currentTab" />
      <view style="padding: 0 20rpx">
        <Scroll-row
          :list="statusList"
          :current="currentStatus"
          key-name="value"
          border
          :activeBold="false"
          padding="20rpx 20rpx 20rpx 0"
          @click="handleStatus"
        />
      </view>
    </u-sticky>
    <view style="padding: 20rpx">
      <Order-card v-for="(i, k) in dataList" :key="k" :row="i" @click="handleBtn" />
      <u-loadmore :status="status" />
    </view>
    <u-modal
      :show="delShow"
      title="提示"
      :content="modelContent"
      showCancelButton
      closeOnClickOverlay
      @confirm="confirm"
      @cancel="cancel"
      @close="cancel"
    />
  </view>
</template>

<script>
import Tabs from "@/components/Tabs/index";
import ScrollRow from "@/components/ScrollRow/index";
import OrderCard from "@/pages/my/cp/OrderCard";

import {
  myOrderList,
  myCancelOrder,
  myDelOrder,
  myConfirmOrder,
} from "@/request/myApi.js";
export default {
  components: { Tabs, ScrollRow, OrderCard },
  data() {
    return {
      currentTab: 0, // 当前菜单
      tabList: [
        { name: "全部订单", value: "all" },
        { name: "商城订单", value: "shop" },
        { name: "活动订单", value: "activity" },
      ],
      currentStatus: 0, // 当前状态
      statusList: [], // 状态列表
      dataList: [], // 数据列表
      status: "loadmore", // 加载状态
      total: 0, // 总数
      page: 1, // 页数
      modelCode: "", // 操作方式
      modelContent: "", // 操作提示
      delShow: false, // 删除订单弹窗
    };
  },
  onReachBottom() {
    if (this.total <= this.dataList.length) return;
    this.page++;
    this.getDataList();
  },
  created() {
    this.initStatus();
    this.getDataList();
  },
  methods: {
    // 切换菜单
    handleTab(v) {
      this.currentTab = v.index;
      this.currentStatus = 0;
      this.page = 1;
      this.dataList = [];
      this.total = 0;
      uni.pageScrollTo(); // 滚动到顶部
      this.initStatus();
      this.getDataList();
    },
    // 初始化状态
    initStatus() {
      let v = this.currentTab;
      let list = [];
      list.push({ label: "全部", value: 0 });
      list.push({ label: "待付款", value: 1 });
      if (v == 1) {
        list.push({ label: "待发货", value: 2 });
        list.push({ label: "待收货", value: 3 });
        list.push({ label: "待评论", value: 4 });
        // list.push({ label: "售后订单", value: 5 }); // 已弃用
        list.push({ label: "已完成", value: 6 });
        list.push({ label: "已取消", value: 7 });
      } else if (v == 2) {
        // list.push({ label: "售后订单", value: 5 }); // 已弃用
        list.push({ label: "待消费", value: 8 });
        list.push({ label: "已完成", value: 6 });
        list.push({ label: "已取消", value: 7 });
      } else {
        list.push({ label: "待发货", value: 2 });
        list.push({ label: "待消费", value: 8 });
        list.push({ label: "待收货", value: 3 });
        list.push({ label: "待评论", value: 4 });
        // list.push({ label: "售后订单", value: 5 }); // 已弃用
        list.push({ label: "已完成", value: 6 });
        list.push({ label: "已取消", value: 7 });
      }
      this.statusList = list;
    },
    // 切换状态
    handleStatus(v) {
      this.currentStatus = v.value;
      this.page = 1;
      this.dataList = [];
      this.total = 0;
      uni.pageScrollTo(); // 滚动到顶部
      this.getDataList();
    },
    // 点击按钮
    handleBtn(v) {
      switch (v.button) {
        case "cancel":
          // 取消订单
          this.delShow = true;
          this.modelCode = v.button;
          this.modelContent = "确认取消订单吗？";
          this.detailRow = v;
          break;
        case "qrcode":
          // 查看券码
          uni.navigateTo({ url: `/pages/my/myOrderCode?id=${v.id}` });
          break;
        case "pay":
          // 立即付款
          let list = [
            {
              price: v.pay.price,
              virtual_coin: v.pay.virtual_coin,
              type: v.type == 'shop' ? 'goods' : 'activity',
              order_no: v.order_no,
              order_id: v.id,
              expiretime: v.expiretime,
            },
          ];
          uni.navigateTo({
            url: `/pages/mall/cashier?token=${v.token}&data=${JSON.stringify(list)}`,
          });
          break;
        case "transport":
          // 查看物流
          uni.navigateTo({ url: "/pages/my/logistics?id=" + v.id });
          break;
        case "receive":
          // 确认收货
          this.delShow = true;
          this.modelCode = v.button;
          this.modelContent = "是否确认收货吗？";
          this.detailRow = v;
          break;
        case "comment":
          // 评论订单
          uni.navigateTo({ url: "/pages/my/myComment?id=" + v.id });
          break;
        case "delete":
          // 删除订单
          this.delShow = true;
          this.modelCode = v.button;
          this.modelContent = "确认删除订单吗？";
          this.detailRow = v;
          break;
      }
    },
    // 确认弹窗
    confirm() {
      this.delShow = false;
      if (this.modelCode == "cancel") {
        this.hnadleCancel();
      } else if (this.modelCode == "delete") {
        this.handleDel();
      } else if (this.modelCode == "receive") {
        this.hnadleConfirm();
      }
    },
    // 取消订单
    hnadleCancel() {
      myCancelOrder({ id: this.detailRow.id }).then((res) => {
        if (res.code == 1) {
          uni.showToast({
            title: "取消成功",
            icon: "none",
          });
          this.dataList.forEach((i) => {
            if (i.id == this.detailRow.id) i.state = 7;
          });
          this.cancel();
        }
      });
    },
    // 删除订单
    handleDel() {
      myDelOrder({ id: this.detailRow.id }).then((res) => {
        if (res.code == 1) {
          uni.showToast({
            title: "删除成功",
            icon: "none",
          });
          this.dataList = this.dataList.filter((i) => i.id != this.detailRow.id);
          this.cancel();
        }
      });
    },
    // 确认收货
    hnadleConfirm() {
      myConfirmOrder({ id: this.detailRow.id }).then((res) => {
        if (res.code == 1) {
          uni.showToast({
            title: "收货成功",
            icon: "none",
          });
          this.dataList.forEach((i) => {
            if (i.id == this.detailRow.id) i.state = 5;
          });
          this.cancel();
        }
      });
    },
    // 取消弹窗
    cancel() {
      this.delShow = false;
      setTimeout(() => {
        this.modelCode = "";
        this.modelContent = "";
        this.detailRow = {};
      }, 300);
    },
    // 获取数据列表
    getDataList() {
      let data = {
        state: this.currentStatus,
        page: this.page,
        type: this.tabList[this.currentTab].value,
      };
      this.status = "loading";
      myOrderList(data)
        .then((res) => {
          if (res.code == 1) {
            let list = res.data.data;
            this.dataList = this.page == 1 ? list : this.dataList.concat(list);
            this.total = res.data.total;
          }
        })
        .finally(() => {
          this.status = this.total > this.dataList.length ? "loadmore" : "nomore";
        });
    },
  },
};
</script>

<style lang="scss" scoped></style>
